
<template>
  <div class="show-info-container">
    <el-divider content-position="right">显示信息</el-divider>
    <el-row type="flex" class="content-container" justify="space-around" :gutter="10">
      <el-col :span="12">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[0] }}</el-col>
            <el-col :span="12">{{ firstInfo?firstInfo:'暂无' }}</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[1] }}</el-col>
            <el-col :span="12">{{ secondInfo?secondInfo:'暂无' }}</el-col>
          </el-row>
        </div>
      </el-col>

    </el-row>
  </div>
</template>
<script>
import { getSingleGoodsAttributeName } from '@/api/youhu-shop/V1/goods/goodsAttribute'
export default
{
  // 组件名称
  name: 'ShowInfo',
  // 组件
  components:
	{
	},
  props:
{
  attributeNameId: {
    type: [String, Number],
    default: 0
  }
},
  // 数据
  data()
  {
    return {
      titleArray: ['显示信息1', '显示信息2', '显示信3'],
      firstInfo: null,
      secondInfo: null,
      thirdInfo: null
    }
  },
  // 计算属性
  computed:
	{
	},
  // 监听
  watch:
{
  attributeNameId: {
    handler(value)
    {
      // console.log('update:' + value)
      if (parseInt(value) > 0)
      {
        this.getSingleGoodsAttributeName(parseInt(value))
      }
    },
    immediate: true
  }
},
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
{
  async getSingleGoodsAttributeName(id)
  {
    const param = { id: id }
    const result = await getSingleGoodsAttributeName(param).then(res =>
    {
      return new Promise((resolve, reject) =>
      {
        if (res && res.code === 0)
        {
          resolve(res.data)
        }
        else
        {
          reject('获取失败')
        }
      })
    })

    this.firstInfo = result.attribute_name
    this.secondInfo = result.attribute_code
  }
}
}
</script>
<style lang='scss' >
.show-info-container{
	width: 100%;
	height: auto;
	/* background-color: pink; */
	.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .content-item {
    border-radius: 4px;
    min-height: 36px;
	background-color: #FFFFFF;
	font-size: 16px;
	line-height: 36px;
	color:#409EFF;
	text-align: center;
  }
  .content-container{
    padding: 10px 0;
    background-color: #409EFF;
	opacity:0.5;
  }

}

</style>
